<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>staticTwo Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>管理后台<small>分布式管理后台</small></h1>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-primary" id="create_job">新建任务</button>
            <button type="button" class="btn btn-success" id="list-worker">健康节点</button>

        </div>
    </div>


    <div class="row">

        <div class="col-md-12">
            <div class="panel panel-default" style="margin-top: 20px">
                <div class="panel-body">
                    <table class="table table-striped" id="job-list">
                        <thead>
                        <th>任务名称</th>
                        <th>执行命令</th>
                        <th>cron表达式</th>
                        <th>任务操作</th>
                        </thead>
                        <tbody>
                        <!--**
                        <tr>
                            <td>job1</td>
                            <td>echo hello</td>
                            <td> * * * * *</td>
                            <td>
                                <div class="btn-toolbar">
                                    <button class="btn btn-info edit-job">编辑</button>
                                    <button class="btn btn-danger delete-job">删除</button>
                                    <button class="btn btn-warning kill-job">强杀</button>
                                </div>

                            </td>
                            -->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--  健康节点弹框开始 -->
    <div id="worker-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">健康节点</h4>
                </div>
                <div class="modal-body">
                    <table id="worker-list" class="table table-striped">
                        <thead>
                        <tr>
                            <th>节点IP</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--  日志弹框 开始-->
    <div id="log-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">任务日志</h4>
                </div>
                <div class="modal-body">
                    <table id="log-list" class="table table-striped">
                        <thead>
                        <tr>
                            <th>shell命令</th>
                            <th>错误原因</th>
                            <th>脚本输出</th>
                            <th>计划开始时间</th>
                            <th>实际调度时间</th>
                            <th>开始执行时间</th>
                            <th>执行结束时间</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- position: fixed  编译任务弹框开始-->
    <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑任务</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="edit-name">任务名称</label>
                            <input type="text" class="form-control" id="edit-name" placeholder="任务名称">
                        </div>
                        <div class="form-group">
                            <label for="edit-command">shell命令</label>
                            <input type="text" class="form-control" id="edit-command" placeholder="shell命令">
                        </div>
                        <div class="form-group">
                            <label for="edit-cronExpr">cron表达式</label>
                            <input type="text" class="form-control" id="edit-cronExpr" placeholder="cron表达式">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-job">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script>
    //javascript 冒泡事件，针对按钮动作的捕获。事件的委托。比如table内的子元素的click事件，会层层冒泡
    $(function () {
        //on的第二个参数代表过滤指定元素，这样只能在特定元素点击的时候，event.currentTarget，下同
        $("#job-list").on("click", ".edit-job", function (event) {
            // 取当前job的信息，赋值给模态框的input
            $('#edit-name').val($(this).parents('tr').children('.job-name').text())
            $('#edit-command').val($(this).parents('tr').children('.job-command').text())
            $('#edit-cronExpr').val($(this).parents('tr').children('.job-jobExpr').text())
            // 弹出模态框
            $('#edit-modal').modal('show')
        })
        $("#job-list").on("click", ".delete-job", function (event) {
            var jobName = $(this).parents("tr").children(".job-name").text()
            console.log(jobName)
            $.ajax({
                "url": "/job/del",
                type: "post",
                dataType: "json",
                data:{name:jobName},
                complete:function(){
                    //测试的的时候删除太快，看不到del的结果【failed to load response data】，可以先把下面注释
                    window.location.reload()
                },
                success: function (res) {
                    if (res.err_no != 0) {
                        console.log(res.msg)
                    }
                }})
        })
        $("#job-list").on("click", ".kill-job", function (event) {
            var jobName = $(this).parents("tr").children(".job-name").text()
            console.log(jobName)
            $.ajax({
                "url": "/job/kill",
                type: "post",
                dataType: "json",
                //记住 JSON.stringfy这个命令，不用去拼
                data:{job:'{"name":"'+jobName+'"}'},
                complete:function(){
                    //测试的的时候删除太快，看不到del的结果【failed to load response data】，可以先把下面注释
                    window.location.reload()
                },
                success: function (res) {
                    if (res.err_no != 0) {
                        console.log(res.msg)
                    }
                }})
        })

        //点击查看健康节点

        $("#list-worker").on('click',function () {
            //重新填充
            $("#worker-list tbody").empty()
            $.ajax({
                url: '/worker/list',//在apiServer中配置路由和handleFunc
                dataType: 'json',
                success: function(resp) {
                    if (resp.err_no != 0) {
                        return
                    }
                    var workerList = resp.data
                    // 遍历每个IP, 添加到模态框的table中
                    for (var i = 0; i < workerList.length; ++i) {
                        var workerIP = workerList[i]
                        var tr = $('<tr>')
                        tr.append($('<td>').html(workerIP))
                        $('#worker-list tbody').append(tr)
                    }
                }
            })
            //显示弹框
            $('#worker-modal').modal('show')
        })
        //保存返回的是旧值
        $("#save-job").on('click',function () {
            var jobInfo={
                name:$("#edit-name").val(),
                command:$("#edit-command").val(),
                cronExpr:$("#edit-cronExpr").val()
            }
            jobInfo=JSON.stringify(jobInfo)
            console.log(jobInfo)
            $.ajax({
                "url": "/job/save",
                type: "post",
                dataType: "json",
                data:{job:jobInfo},
                complete:function(){
                    //测试的的时候删除太快，看不到del的结果【failed to load response data】，可以先把下面注释
                    window.location.reload()
                },
                success: function (res) {
                    if (res.err_no != 0) {
                        console.log(res.msg)
                    }
                }})
        })

        // 查看任务日志
        $("#job-list").on("click", ".log-job", function(event) {
            // 清空日志列表
            $('#log-list tbody').empty()
            // 获取任务名
            var jobName = $(this).parents('tr').children('.job-name').text()
            // 请求/job/log接口
            $.ajax({
                url: "/job/log",
                dataType: 'json',
                data: {name: jobName},
                success: function(resp) {
                    if (resp.err_no != 0) {
                        return
                    }
                    // 遍历日志
                    var logList = resp.data
                    for (var i = 0; i < logList.length; ++i) {
                        var log = logList[i]
                        var tr = $('<tr>')
                        tr.append($('<td>').html(log.command))
                        tr.append($('<td>').html(log.err))
                        tr.append($('<td>').html(log.output))
                        tr.append($('<td>').html(timeFormat(log.planTime)))
                        tr.append($('<td>').html(timeFormat(log.scheduleTime)))
                        tr.append($('<td>').html(timeFormat(log.startTime)))
                        tr.append($('<td>').html(timeFormat(log.endTime)))
                        $('#log-list tbody').append(tr)
                    }
                }
            })
            // 弹出模态框
            $('#log-modal').modal('show')
        })

        //新建任务，也是请求save接口，只不过要清空表单。
        $("#create_job").on('click',function () {

            $("#edit-name").val('')
            $("#edit-command").val('')
            $("#edit-cronExpr").val('')

            $("#edit-modal").modal('show')
            $("#edit-modal .modal-title").html('新建')


        })

        function rebuildJobList() {
            $.ajax({
                "url": "/job/list",
                dataType: "json",
                success: function (res) {
                    if (res.err_no != 0) {
                        return
                    }
                    var jobList = res.data
                    $("#job-list tbody").empty()
                    for (var i = 0; i < jobList.length; ++i) {
                        var job = jobList[i]
                        var tr = $("<tr>")
                        tr.append($("<td class='job-name'>").html(job.name))
                        tr.append($("<td class='job-command'>").html(job.command))
                        tr.append($("<td class='job-jobExpr'>").html(job.cronExpr))
                        var toolbar = $("<div class='btn-toolbar'>")
                            .append('<button class="btn btn-info edit-job">编辑</button>')
                            .append('<button class="btn btn-danger delete-job">删除</button>')
                            .append('<button class="btn btn-warning kill-job">强杀</button>')
                        tr.append($('<td>').append(toolbar))
                        $("#job-list tbody").append(tr)
                    }
                }
            })
        }

        //页面加载的时候先把所有任务拉过来
        rebuildJobList()
    });


</script>

</body>

</html>